<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LLM模型交互 | LLM Model Interaction</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #6f8ab7;
            --accent-color: #e67e22;
            --background-color: #f5f7fa;
            --card-background: #ffffff;
            --text-color: #333333;
            --border-color: #e1e4e8;
            --success-color: #27ae60;
            --error-color: #e74c3c;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
            margin: 0;
            padding: 0;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 0;
            box-shadow: var(--shadow);
        }
        
        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 1.8rem;
        }
        
        nav ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        nav li {
            margin-left: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            transition: color 0.3s;
        }
        
        nav a:hover {
            color: var(--accent-color);
        }
        
        nav a i {
            margin-right: 5px;
        }
        
        .card {
            background-color: var(--card-background);
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 20px;
        }
        
        h2 {
            color: var(--primary-color);
            margin-top: 0;
            display: flex;
            align-items: center;
        }
        
        h2 i {
            margin-right: 10px;
            color: var(--accent-color);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
        }
        
        textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        
        .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: var(--secondary-color);
        }
        
        .btn i {
            margin-right: 5px;
        }
        
        .error-message {
            background-color: #fdecea;
            border-left: 4px solid var(--error-color);
            padding: 15px;
            margin-bottom: 20px;
            color: #c0392b;
        }
        
        .response-container {
            margin-top: 30px;
            border-top: 1px solid var(--border-color);
            padding-top: 20px;
        }
        
        .response-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .response-time {
            color: #666;
            font-size: 0.9rem;
        }
        
        .response-content {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 4px;
            border: 1px solid #eaecef;
            white-space: pre-wrap;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
        }
        
        .checkbox-group input[type="checkbox"] {
            margin-right: 10px;
        }
        
        .search-options {
            margin-top: 15px;
            padding: 15px;
            background-color: #f0f4f8;
            border-radius: 4px;
            border: 1px solid #d1dbe8;
            margin-bottom: 20px;
        }
        
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            margin-top: 40px;
        }
        
        .deepseek-search-container {
            margin-top: 20px;
        }
        
        .deepseek-search-results {
            margin-bottom: 20px;
        }
        
        .deepseek-result-item {
            padding: 15px;
            border: 1px solid #e1e4e8;
            border-radius: 4px;
            margin-bottom: 10px;
            background-color: white;
            transition: box-shadow 0.3s;
        }
        
        .deepseek-result-item:hover {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .deepseek-result-title {
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .deepseek-result-url {
            color: #27ae60;
            font-size: 0.9rem;
            margin-bottom: 10px;
            word-break: break-all;
        }
        
        .deepseek-result-snippet {
            font-size: 0.95rem;
            color: #555;
        }
        
        .deepseek-citation {
            display: inline-block;
            background-color: #f0f4f8;
            color: var(--primary-color);
            padding: 0 5px;
            border-radius: 3px;
            cursor: pointer;
            font-weight: bold;
        }
        
        #llm-response {
            line-height: 1.7;
        }
        
        .settings-section {
            margin-bottom: 20px;
            border: 1px solid #d1dbe8;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .settings-header {
            background-color: #f0f4f8;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .settings-header h3 {
            margin: 0;
            font-size: 1.1rem;
            color: var(--primary-color);
        }
        
        .toggle-settings-btn {
            background: none;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            font-size: 1rem;
        }
        
        .settings-content {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 0 0 4px 4px;
        }
        
        .api-model-group, .ollama-model-group {
            margin-top: 15px;
        }
        
        .range-slider {
            display: flex;
            align-items: center;
        }
        
        .range-slider input[type="range"] {
            flex: 1;
            margin-right: 10px;
        }
        
        .range-value {
            min-width: 40px;
            text-align: center;
            background-color: var(--primary-color);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <i class="fas fa-robot"></i>
                <span>LLM Web Search Plugin</span>
            </div>
            <nav>
                <ul>
                    <li><a href="/"><i class="fas fa-home"></i> Home</a></li>
                    <li><a href="/llm"><i class="fas fa-robot"></i> LLM Chat</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <div class="container">
        <div class="card">
            <h2><i class="fas fa-robot"></i> LLM模型交互 | LLM Model Interaction</h2>
            
            {% if error_message %}
            <div class="error-message">
                {{ error_message }}
            </div>
            {% endif %}
            
            <form method="POST" action="/llm">
                <div class="form-group">
                    <label for="query">查询内容 | Query</label>
                    <textarea class="form-control" id="query" name="query" placeholder="输入您的问题... | Enter your question..." required>{{ query }}</textarea>
                </div>
                
                <div class="form-group">
                    <label for="llm_type">LLM类型 | LLM Type:</label>
                    <select id="llm_type" name="llm_type" class="form-control">
                        <option value="api" {% if llm_type == 'api' %}selected{% endif %}>API</option>
                        <option value="ollama" {% if llm_type == 'ollama' %}selected{% endif %}>Ollama</option>
                    </select>
                </div>
                
                <div class="api-model-group" id="api-model-group">
                    <div class="form-group">
                        <label for="model">API模型 | API Model:</label>
                        <select id="model" name="model" class="form-control">
                            {% for model_name in api_models %}
                            <option value="{{ model_name }}" {% if model == model_name %}selected{% endif %}>{{ model_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <div class="ollama-model-group" id="ollama-model-group">
                    <div class="form-group">
                        <label for="ollama_model">Ollama模型 | Ollama Model:</label>
                        <select id="ollama_model" name="ollama_model" class="form-control">
                            {% for model_name in ollama_models %}
                            <option value="{{ model_name }}" {% if model == model_name %}selected{% endif %}>{{ model_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="temperature">温度 | Temperature: <span id="temperature-value">{{ temperature }}</span></label>
                    <div class="range-slider">
                        <input type="range" id="temperature" name="temperature" min="0" max="1" step="0.1" value="{{ temperature }}" class="form-control">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="max_tokens">最大令牌数 | Max Tokens:</label>
                    <input type="number" id="max_tokens" name="max_tokens" value="{{ max_tokens }}" min="10" max="4096" class="form-control">
                </div>
                
                <div class="form-group checkbox-group">
                    <input type="checkbox" id="use_web_search" name="use_web_search" {% if use_web_search %}checked{% endif %}>
                    <label for="use_web_search">使用网络搜索 | Use Web Search</label>
                </div>
                
                <div id="searchOptions" class="search-options" {% if use_web_search %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                    <div class="form-grid">
                        <div class="form-group">
                            <label for="num_results">
                                搜索结果数量 | Number of Results
                            </label>
                            <input type="number" id="num_results" name="num_results" value="{{ num_results }}" min="1" max="10" class="form-control">
                        </div>
                        
                        <div class="form-group">
                            <label for="search_engine">
                                搜索引擎 | Search Engine
                            </label>
                            <select id="search_engine" name="search_engine" class="form-control">
                                <option value="google" {% if search_engine == 'google' %}selected{% endif %}>Google</option>
                                <option value="bing" {% if search_engine == 'bing' %}selected{% endif %}>Bing</option>
                                <option value="baidu" {% if search_engine == 'baidu' %}selected{% endif %}>Baidu</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <button type="submit" class="btn"><i class="fas fa-paper-plane"></i> 提交 | Submit</button>
            </form>
            
            {% if response_text %}
            <div class="response-container">
                <div class="response-header">
                    <h3><i class="fas fa-comment-dots"></i> LLM回答 | LLM Response</h3>
                    <div class="response-time">处理时间 | Processing Time: {{ "%.2f"|format(processing_time) }} 秒</div>
                </div>
                
                {% if search_results %}
                <div class="deepseek-search-container">
                    <h4><i class="fas fa-search"></i> 搜索结果 | Search Results</h4>
                    <div class="deepseek-search-results">
                        {% for result in search_results %}
                        <div class="deepseek-result-item">
                            <div class="deepseek-result-title">{{ loop.index }}. {{ result.title }}</div>
                            <div class="deepseek-result-url">{{ result.url }}</div>
                            <div class="deepseek-result-snippet">{{ result.snippet }}</div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                
                <div class="response-content">
                    <div id="llm-response">{{ response_text|safe }}</div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    
    <footer>
        <div class="container">
            <p>&copy; {{ current_year }} LLM Web Search Plugin</p>
        </div>
    </footer>
    
    <script>
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化LLM类型显示
            updateModelGroups();
            
            // 初始化搜索选项切换
            const checkbox = document.getElementById('use_web_search');
            if (checkbox) {
                checkbox.addEventListener('change', toggleSearchOptions);
            }
            
            // 处理引用标记
            const llmResponse = document.getElementById('llm-response');
            if (llmResponse) {
                // 替换[1], [2]等引用标记为可点击的引用
                let content = llmResponse.innerHTML;
                content = content.replace(/\[(\d+)\]/g, '<span class="deepseek-citation" onclick="highlightSource($1)">[$1]</span>');
                llmResponse.innerHTML = content;
            }
            
            // 温度滑块值显示
            const temperatureSlider = document.getElementById('temperature');
            const temperatureValue = document.getElementById('temperature-value');
            
            if (temperatureSlider && temperatureValue) {
                temperatureSlider.addEventListener('input', function() {
                    temperatureValue.textContent = this.value;
                });
            }
            
            // LLM类型切换
            const llmTypeSelect = document.getElementById('llm_type');
            if (llmTypeSelect) {
                llmTypeSelect.addEventListener('change', updateModelGroups);
            }
        });
        
        // 切换搜索选项显示
        function toggleSearchOptions() {
            const checkbox = document.getElementById('use_web_search');
            const searchOptions = document.getElementById('searchOptions');
            
            if (checkbox && searchOptions) {
                searchOptions.style.display = checkbox.checked ? 'block' : 'none';
            }
        }
        
        // 高亮显示引用的来源
        function highlightSource(index) {
            // 移除所有高亮
            const resultItems = document.querySelectorAll('.deepseek-result-item');
            if (resultItems) {
                resultItems.forEach(item => {
                    item.style.boxShadow = 'none';
                });
                
                // 高亮对应的来源
                const sourceElement = document.querySelector(`.deepseek-result-item:nth-child(${index})`);
                if (sourceElement) {
                    sourceElement.style.boxShadow = '0 0 0 2px var(--accent-color)';
                    sourceElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        }
        
        // 更新模型组显示
        function updateModelGroups() {
            const llmType = document.getElementById('llm_type');
            const apiModelGroup = document.getElementById('api-model-group');
            const ollamaModelGroup = document.getElementById('ollama-model-group');
            
            if (llmType && apiModelGroup && ollamaModelGroup) {
                const selectedType = llmType.value;
                
                if (selectedType === 'api') {
                    apiModelGroup.style.display = 'block';
                    ollamaModelGroup.style.display = 'none';
                    
                    // 确保正确的模型字段名称
                    const apiModelSelect = document.getElementById('model');
                    const ollamaModelSelect = document.getElementById('ollama_model');
                    if (apiModelSelect && ollamaModelSelect) {
                        apiModelSelect.name = 'model';
                        ollamaModelSelect.name = 'ollama_model';
                    }
                } else {
                    apiModelGroup.style.display = 'none';
                    ollamaModelGroup.style.display = 'block';
                    
                    // 确保正确的模型字段名称
                    const apiModelSelect = document.getElementById('model');
                    const ollamaModelSelect = document.getElementById('ollama_model');
                    if (apiModelSelect && ollamaModelSelect) {
                        apiModelSelect.name = 'api_model';
                        ollamaModelSelect.name = 'model';
                    }
                }
            }
        }
    </script>
</body>
</html>
